<template>
    <div class="orderDetails-page" v-loading="tableDataLoading">
      <h3>订单详情</h3>
      <div v-if="tableData">
        <div class="page-list" v-if="tableData.user">
          <AreaTitleWarp :title="'用户信息'"></AreaTitleWarp>
          <ul class="list-ul">
              <li class="list-li">
                  <div class="li-title">姓名</div>
                  <div class="li-text">{{ tableData.user.realname }}</div>
              </li>
              <li class="list-li">
                  <div class="li-title">手机号</div>
                  <div class="li-text">{{ tableData.user.mobile }}</div>
              </li>
          </ul>
      </div>

        <div class="page-list" v-if="tableData.borrow">
          <AreaTitleWarp :title="'订单信息'"></AreaTitleWarp>
          <ul class="list-ul">
              <li class="list-li">
                  <div class="li-title">订单号</div>
                  <div class="li-text">{{ tableData.borrow.id }}</div>
              </li>
              <li class="list-li">
                  <div class="li-title">申请时间</div>
                  <div class="li-text">{{ filter_time(tableData.borrow.applyTime) }}</div>
              </li>
              <li class="list-li">
                  <div class="li-title">申请金额</div>
                  <div class="li-text">{{ tableData.borrow.capital }}</div>
              </li>
              <li class="list-li">
                  <div class="li-title">申请期限</div>
                  <div class="li-text">{{ tableData.borrow.period }}</div>
              </li>
          </ul>
      </div>

        <div class="page-list" v-if="tableData.pay">
          <AreaTitleWarp :title="'放款信息'"></AreaTitleWarp>
          <ul class="list-ul">
              <li class="list-li">
                  <div class="li-title">借款总额</div>
                  <div class="li-text">{{ tableData.pay.capital }}</div>
              </li>
              <li class="list-li">
                  <div class="li-title">砍头息</div>
                  <div class="li-text">{{ tableData.pay.cutInterest }}</div>
              </li>
              <li class="list-li">
                  <div class="li-title">利息</div>
                  <div class="li-text">{{ tableData.pay.extraInterest }}</div>
              </li>
              <li class="list-li">
                  <div class="li-title">实际放款金额</div>
                  <div class="li-text">{{ tableData.pay.realCapital }}</div>
              </li>
              <li class="list-li">
                  <div class="li-title">放款时间</div>
                  <div class="li-text">{{ filter_time(tableData.pay.payTime) }}</div>
              </li>
              <li class="list-li">
                  <div class="li-title">到期时间</div>
                  <div class="li-text">{{ tableData.pay.lastRepayDay }}</div>
              </li>
          </ul>
      </div>

        <div class="page-list" v-if="tableData.repay">
          <AreaTitleWarp :title="'还款信息'"></AreaTitleWarp>
          <ul class="list-ul">
              <li class="list-li">
                  <div class="li-title">是否逾期</div>
                  <div class="li-text">{{ tableData.repay.overdueDays>0?"是":"否" }}</div>
              </li>
              <li class="list-li">
                  <div class="li-title">逾期天数</div>
                  <div class="li-text">{{ tableData.repay.overdueDays }}</div>
              </li>
              <li class="list-li">
                  <div class="li-title">逾期费用</div>
                  <div class="li-text">{{ tableData.repay.punishInterest }}</div>
              </li>
              <li class="list-li">
                  <div class="li-title">减免罚息</div>
                  <div class="li-text">{{ tableData.repay.discount }}</div>
              </li>
              <li class="list-li">
                  <div class="li-title">已还款金额</div>
                  <div class="li-text">{{ tableData.repay.repaidMoney }}</div>
              </li>
              <li class="list-li">
                  <div class="li-title">待还款金额</div>
                  <div class="li-text">{{ tableData.repay.leftMoney }}</div>
              </li>
              <li class="list-li">
                  <div class="li-title">结清时间</div>
                  <div class="li-text">{{ filter_time(tableData.repay.settledTime) }}</div>
              </li>
          </ul>
      </div>
      </div>
    </div>
</template>
<script>
    import { filterTime } from '../../assets/js/time.js';
    export default({
      props:['queryMsg'],
      data(){
        return{
          tableData:null,
          tableDataLoading: false
        }
      },
      methods:{
        gettableData(){
          let that = this;
          that.tableDataLoading = true;
          that.ajaxJson({
            url: '/user/detail',
            data: {
              applyId: that.queryMsg.id,
              userId: that.queryMsg.userId
            },
            success: function (data) {
              if (data.code == '0') {
                that.tableData = data.data
              }
              that.tableDataLoading = false;
            }
          })
        },
        filter_time: filterTime,
      },
      created(){
        let that = this;
        that.gettableData();
      }
    })
</script>
<style lang="less">
    .orderDetails-page{
        .page-list{
            margin-bottom:30px;
            background:#fff;
            .list-ul{
                padding:0 20px 10px;
                margin:0;
                overflow:hidden;
                .list-li{
                    width:50%;
                    float:left;
                    line-height:30px;
                    display:flex;
                    .li-title{
                        width:120px;
                        flex:none;
                        color:#000000;
                        font-size:14px;
                        line-height:30px;
                    }
                    .li-text{
                        flex:1;
                        color:#999;
                        font-size:14px;
                        line-height:30px;
                    }

                }
            }

        }
    }
</style>
